<!-- Vue 2 选项式API组件，展示beforeCreate和created生命周期钩子的特性 -->
<script>
export default {
    // data选项：定义组件的响应式数据
    data() {
        return {
            value: "Hello World",  // 定义一个名为value的响应式数据，值为"Hello World"
        }
    },

    // beforeCreate生命周期钩子
    // 触发时机：组件实例刚被创建，但是数据观测（data的响应式处理）和事件机制都尚未初始化
    beforeCreate() {
        // 此时无法访问到data中的数据（因为还未初始化）
        // 打印结果为：beforeCreate:undefined
        console.log("beforeCreate:" + this.value);
    },

    // created生命周期钩子
    // 触发时机：组件实例创建完成，数据观测（data的响应式处理）和事件机制已经初始化完成
    created() {
        // 此时可以访问到data中的响应式数据（已完成初始化）
        // 打印结果为：created:Hello World
        console.log("created:" + this.value);
    }
}
</script>

<!-- 模板部分：当前组件没有定义任何DOM结构 -->
<template>

</template>

<!-- 样式部分：当前组件没有定义任何样式 -->
<!-- scoped属性表示样式仅作用于当前组件（即使有样式也不会影响其他组件） -->
<style scoped>

</style>